<template>
  <div>
    <el-upload
      :before-upload="beforeUpload"
      action="http://home.i3vsoft.com:1080/public-file-system/fs/file/upload"
      list-type="picture-card"
      :headers="uploadHeaders"
      :data="loadFileParams"
      :on-success="handleUploadSuccess"
      :on-preview="handlePictureCardPreview"
      :on-remove="handleRemove"
      :limit="1"
      :file-list="fileList"
    >
      <i class="el-icon-plus"></i>
    </el-upload>
    <el-dialog :visible.sync="dialogVisible">
      <img width="100%" :src="dialogImageUrl" alt="" />
    </el-dialog>
  </div>
</template>
<script>
import http from "@/api/http.js";
export default {
  data() {
    return {
      fileList: [], // 控制上传的文件列表
      dialogImageUrl: "",
      dialogVisible: false,
      loadFileParams: {
        folderId: "40287e01907244650190729cf393002d",
        isCover: "0",
      },
      uploadHeaders: {
        "X-SYSTEM": "saas",
        "X-Access-Token":
          this.$store.state.XAccessToken == ""
            ? sessionStorage.getItem("XAccessToken")
            : this.$store.state.XAccessToken,
        "Sys-Access-Token": this.$store.state.SysAccessToken,
      },
    };
  },
  props: {
    sitePic: String,
  },
  watch: {
    sitePic(newValue) {
      console.log(newValue);
      this.dialogImageUrl = newValue;
      if (newValue) {
        this.fileList = [
          {
            name: "已上传图片",
            url: newValue,
          },
        ];
      } else {
        // 如果 sitePic 为空，则清空文件列表
        this.fileList = [];
      }
    },
  },
  mounted() {
    // 组件加载时初始化 fileList
    if (this.sitePic) {
      this.fileList = [
        {
          name: "已上传图片",
          url: this.sitePic,
        },
      ];
      this.dialogImageUrl = this.sitePic;
    }
  },
  methods: {
    beforeUpload(file) {
      return new Promise((resolve, reject) => {
        http
          .post(
            "http://home.i3vsoft.com:1080/public-file-system/fs/file/addFolder",
            {
              folderName: "官网",
              folderDescribe: "官网目录自动创建",
              folderAttributes: '{"dataType":0}',
            }
          )
          .then((res) => {
            if (res.data.code === 200) {
              this.loadFileParams.folderId = res.data.result;
              resolve(true); // 允许上传
            } else {
              reject(false); // 阻止上传
            }
          })
          .catch(() => {
            reject(false); // 阻止上传
          });
      });
    },
    handleUploadSuccess(response, file) {
      if (response.code === 200) {
        this.dialogImageUrl = response.result.src;
        this.$emit("image-uploaded", this.dialogImageUrl); // 传递给父组件
      }
    },
    handleRemove(file) {
      console.log(file);
    },
    handlePictureCardPreview(file) {
      this.dialogImageUrl = file.url;
      this.dialogVisible = true;
    },
    handleDownload(file) {
      console.log(file);
    },
  },
};
</script>
<style scoped>
.el-button--primary {
  background-color: rgb(126, 114, 242);
  border-color: #7e72f2;
}
.el-button--primary:hover {
  background-color: rgba(126, 114, 242, 0.5);
}
</style>
